<script setup lang="ts">
import { NButton, NDataTable, NPagination, type DataTableColumns, NSpace } from 'naive-ui'
import type { HttpResponsePagination } from '@/utils/http'
import type { DjRecordTableRow } from '@/api/djRecord'
import { ref, h, reactive, onMounted } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import router from '@/router'

const route = useRoute()

const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData()
  }
})

const tableData = ref<DjRecordTableRow[]>([])
const tableLoading = ref(false)
const queryTableData = async () => {
  try {
    tableLoading.value = true
    const [error, res] = await sendRequest<HttpResponsePagination<DjRecordTableRow>>({
      module: 'djRecord',
      api: 'list',
      override: {
        params: {
          limit: paginationReactive.pageSize,
          page: paginationReactive.page,
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    console.log(res.data)

    tableData.value = res.data.list
    paginationReactive.itemCount = res.data.totalCount
  } catch (error) {
    console.error(error)
  } finally {
    tableLoading.value = false
  }
}
const columns: DataTableColumns<DjRecordTableRow> = [
  {
    title: '编号',
    key: 'code'
  },
  {
    title: '批次编号',
    key: 'batchCode'
  },
  {
    title: '批次名称',
    key: 'batchName'
  },
  {
    title: '发起人',
    key: 'creator'
  },
  {
    title: '督交人',
    key: 'receiver',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '物品数量',
    key: 'itemNum',
    width: 100,
    align: 'center'
  },
  {
    title: '申请日期',
    key: 'createTime'
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 100,
    render: (e) => {
      return h(
        NSpace,
        {
          justify: 'center',
          wrap: false
        },
        {
          default: () => [
            h(
              NButton,
              {
                quaternary: true,
                type: 'primary',
                onClick: () => {
                  router.push({
                    name: 'djRecordDetail',
                    query: {
                      id: e.id,
                      redirect: route.fullPath
                    }
                  })
                }
              },
              {
                default: () => '详情'
              }
            )
          ]
        }
      )
    }
  }
]

const jdPaginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    jdPaginationReactive.page = page
    queryJDTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    jdPaginationReactive.pageSize = pageSize
    jdPaginationReactive.page = 1
    queryJDTableData()
  }
})

const jdTableData = ref<any[]>([])
const jdTableLoading = ref(false)
const queryJDTableData = async () => {
  try {
    jdTableLoading.value = true
    const [error, res] = await sendRequest({
      module: 'identify',
      api: 'identifyListVo',
      override: {
        params: {
          limit: jdPaginationReactive.pageSize,
          page: jdPaginationReactive.page,
          batchId: route.params.id
        }
      }
    })
    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    jdTableData.value = res.data.list
    jdPaginationReactive.itemCount = res.data.totalCount
  } catch (error) {
    console.log(error)
  } finally {
    jdTableLoading.value = false
  }
}

const jdColumns: DataTableColumns<any> = [
  {
    title: '鉴定编号',
    key: 'identifyCode'
  },
  {
    title: '鉴定名称',
    key: 'identifyName'
  },
  {
    title: '鉴定日期',
    key: 'identifyTime'
  },
  {
    title: '鉴定地点',
    key: 'identifyAddress'
  },
  {
    title: '鉴定专家',
    key: 'identifyExperts',
    render: (e) => e.identifyExperts?.join('，')
  },
  {
    title: '描述',
    key: 'identifyDescription'
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    width: 100,
    fixed: 'right',
    render: (e) => {
      return h(
        NSpace,
        {
          justify: 'center',
          wrap: false
        },
        {
          default: () => [
            h(
              NButton,
              {
                color: '#6CB187',
                quaternary: true,
                size: 'small',
                onClick: () => {
                  router.push({
                    name: 'identifyDetail',
                    params: {
                      id: e.batchId
                    },
                    query: {
                      identifyId: e.id,
                      redirect: route.fullPath
                    }
                  })
                }
              },
              { default: () => '详情' }
            )
          ]
        }
      )
    }
  }
]

onMounted(() => {
  queryTableData()
  queryJDTableData()
})
</script>

<template>
  <div class="br"></div>

  <div class="bad-title">鉴定信息</div>
  <div class="bad-card dc">
    <NDataTable
      :columns="jdColumns"
      :data="jdTableData"
      :loading="jdTableLoading"
    />
    <NPagination
      :page-sizes="jdPaginationReactive.pageSizes"
      :item-count="jdPaginationReactive.itemCount"
      :page="jdPaginationReactive.page"
      :page-size="jdPaginationReactive.pageSize"
      @update:page="jdPaginationReactive.onChange"
      @update:page-size="jdPaginationReactive.onUpdatePageSize"
      show-size-picker
      show-quick-jumper
      :suffix="() => '页'"
    >
      <template #prefix>
        <span style="font-size: 14px">共{{ jdPaginationReactive.itemCount }}条</span>
      </template>
    </NPagination>
  </div>

  <div class="br"></div>

  <div class="bad-title">点交信息</div>
  <div class="bad-card dc">
    <NDataTable
      :columns="columns"
      :data="tableData"
      :loading="tableLoading"
    />
    <NPagination
      :page-sizes="paginationReactive.pageSizes"
      :item-count="paginationReactive.itemCount"
      :page="paginationReactive.page"
      :page-size="paginationReactive.pageSize"
      @update:page="paginationReactive.onChange"
      @update:page-size="paginationReactive.onUpdatePageSize"
      show-size-picker
      show-quick-jumper
      :suffix="() => '页'"
    >
      <template #prefix>
        <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
      </template>
    </NPagination>
  </div>
</template>

<style scoped lang="scss">
.br {
  position: relative;
  width: 100%;
  padding: 30rem 0;

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    border-top: 1px dotted #bc9e70;
    transform: translateY(-50%);
  }
}

.bad-card {
  padding: 20rem;
  background-color: #e1e1e1;

  &.dc {
    display: flex;
    flex-direction: column;
    gap: 16rem 0;
  }
}

.bad-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}
</style>
